<script setup lang="ts">
import { getGlobalSubmissionList } from '@/api/problem';
import { onBeforeMount, ref } from 'vue';
import SubmitList from '@/components/SubmitList/index.vue';
import { useRouter } from 'vue-router';
import { Spin } from 'ant-design-vue';


const router = useRouter();
const list = ref([]);
const currentPage = ref(1);
const nextPageUrl = ref('');
const prevPageUrl = ref('');
const isLoading = ref(false);


async function fetchGlobalSubmitList(page: number = currentPage.value) {
  isLoading.value = true;
  try {
    const res: { results: [], next: string, previous: string } = await getGlobalSubmissionList(page);

    list.value = res.results;

    nextPageUrl.value = res.next;
    prevPageUrl.value = res.previous;
    currentPage.value = page;
    isLoading.value = false;

  } catch (error) {
    console.error('Error fetching submission list:', error);

    isLoading.value = false;
  }
}

// 初始加载第一页数据
onBeforeMount(() => {
  fetchGlobalSubmitList(currentPage.value);
});

function goToPreviousPage() {
  const newPage = currentPage.value - 1;
  router.push(`/status?page=${newPage}`);
  fetchGlobalSubmitList(newPage);
}

function goToNextPage() {
  const newPage = currentPage.value + 1;
  router.push(`/status?page=${newPage}`);
  fetchGlobalSubmitList(newPage);
}


const columns = [
  {
    title: '用户',
    dataIndex: 'username',
    key: 'personId',
    align: 'center',
  },
  {
    title: '题目名称',
    dataIndex: 'problemName',
    key: 'problemId',
    align: 'center',
  },
  {
    title: '提交结果',
    dataIndex: 'remoteVerdict',
    key: 'remoteVerdict',
    align: 'center',
  },
  {
    title: '使用算法',
    dataIndex: 'tags',
    key: 'tags',
    align: 'center',
  },
  {
    title: '耗时',
    dataIndex: 'problemId',
    key: 'time',
    align: 'center',
  },
  {
    title: '内存',
    dataIndex: 'problemId',
    key: 'memory',
    align: 'center',
  },
  {
    title: '语言',
    dataIndex: 'lang',
    key: 'lang',
    align: 'center',
  },
  {
    title: '提交时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
];
</script>

<template>
  <a-row type="flex" justify="center">
    <a-col :xs="23" :sm="23" :md="20" :lg="18" :xl="18">
      <h1 v-show="!isLoading" class="title">Status</h1>
      <div v-if="isLoading" class="loading-overlay">
        <a-spin size="large" />
      </div>
      <transition name="list-fade">
        <SubmitList :list="list" :columns="columns"/>
      </transition>
      <div class="pagination">
        <a-button v-show="!isLoading" :disabled="!prevPageUrl" @click="goToPreviousPage">上一页</a-button>
        <a-button v-show="!isLoading" :disabled="!nextPageUrl" @click="goToNextPage">下一页</a-button>
      </div>

    </a-col>
  </a-row>

</template>

<style scoped lang="less">
.title {
  font-size: 30px;
  margin: 16px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}


.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
